<template>
  <div class="shop-view">
    <a-page-header title="店铺主页" />
    <div class="shop-info">
      <h2>店铺名称</h2>
      <p>店铺简介</p>
    </div>
    <div class="shop-product-list">
      <a-card v-for="item in 6" :key="item" class="product-card" hoverable>
        <template #cover>
<!--          <img alt="example" src="https://img.alicdn.com/imgextra/i4/6000000000425/O1CN01Q0Q0Qw1Q0Q0Q0Q0Q0_!!6000000000425-0-tbvideo.jpg" />-->
        </template>
        <a-card-meta title="商品名称" description="商品描述" />
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
// 这里后续可根据路由参数获取店铺信息及商品
</script>

<style scoped>
.shop-view {
  padding: 24px;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.shop-product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}
.product-card {
  width: 220px;
}
</style>
